window.onload = () => { 
    let container = document.querySelector('.container')
    let colors = ['#3498db','#e74c3c','#2ecc71','#f1c40f','#1abc9c']
    let number = 500
    for (let i = 0; i < number; i++) { 
        let div = document.createElement('div')
        div.addEventListener('mousemove', () => { 
            addcolor(div)
        })
        div.addEventListener('mouseout', () => { 
            delcolor(div)
        })
        div.classList.add('box')
        container.appendChild(div)
    }
    function addcolor(element) { 
        const color = getranowColor()
        // console.log(element)
        // console.log(color)
        element.style.background = color
        element.style.boxShadow = `0 0 2px ${color},0 0 10px ${color}`
    }
    function delcolor(element){ 
        element.style.background = '#1d1d1d'
        element.style.boxShadow = '0 0 2px #000'
    }
    function getranowColor() { 
        return colors[Math.floor(Math.random() * colors.length)]
    }
}